<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
    <div id="formBox" class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-agent-add">
			<div class="form-group">	
				<label class="col-sm-3 control-label">用户账号：</label>
				<div class="col-sm-8">
					<input id="userLoginName" name="userLoginName" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">代理商状态：</label>
				<div class="col-sm-8">
					<select name="accoutState" class="form-control m-b" th:with="type=${@dict.getType('pay_accout_state')}">
						<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
					</select>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">姓名：</label>
				<div class="col-sm-8">
					<input id="realname" name="realname" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">手机号码：</label>
				<div class="col-sm-8">
					<input id="phonenumber" name="phonenumber" class="form-control" type="text">
				</div>
			</div>
			<div v-show="authType == '1'" class="form-group">
				<label class="col-sm-3 control-label">身份证正面：</label>
				<div class="col-sm-8">
					<img id="certImgFont" :src="certImgFont" class="col-sm-12 " style="width: 100%;height: 100%;padding: 0 0;">
				</div>
			</div>
			<div v-show="authType == '1'" class="form-group">
				<label class="col-sm-3 control-label">身份证背面：</label>
				<div class="col-sm-8">
					<img id="certImgBack" :src="certImgBack" class="col-sm-12 " style="width: 100%;height: 100%;padding: 0 0;">
				</div>
			</div>
			<div v-show="authType == '2'" class="form-group">
				<label class="col-sm-3 control-label">护照照片：</label>
				<div class="col-sm-8">
					<img id="certImgPass" :src="certImgPass" class="col-sm-12 " style="width: 100%;height: 100%;padding: 0 0;">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">实名认证状态：</label>
				<div class="col-sm-8">
					<select name="certState" class="form-control m-b" th:with="type=${@dict.getType('pay_user_cert_state')}">
						<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
					</select>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">手续费分润比率：</label>
				<div class="col-sm-8">
					<input id="dlRate" name="dlRate" class="form-control" type="text">
				</div>
			</div>
		</form>
	</div>
    <script th:src="@{/js/vue.min.js}"></script>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/ajaxupload.js}"></script>
    <div th:include="include::footer"></div>
    <script type="text/javascript">
        var prefix = ctx + "manager/user";
        var roleid = "4";
        $("#form-agent-add").validate({
        rules:{
                                                                                                    userLoginName:{
                            required:true,
                            minlength: 2,
                            maxlength: 20,
                            remote: {
                                url: ctx + "manager/user/checkLoginNameUnique",
                                type: "post",
                                dataType: "json",
                                data: {
                                    login_name : function() {
                                        return $.common.trim($("#userLoginName").val());
                                    }
                                },
                                dataFilter: function(data, type) {
                                    return $.validate.unique(data);
                                }
                            }
                        },
                                                                                                                                        accoutState:{
                            required:true
                        },
                                                                                                                                                                realname:{
                            required:true
                        },
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        dlRate:{
                            required:true
                        },
                                                                                                                                                                                                                                                                                    },
        messages: {
            "userLoginName": {
                remote: "用户已经存在"
            }
        }
        });

        function submitHandler() {
            if ($.validate.form()) {
                var params = $('#form-agent-add').serialize();
                                params += '&certImgFont=' + modelBean.certImgFont;
                params += '&certImgBack=' + modelBean.certImgBack;
                params += '&certImgPass=' + modelBean.certImgPass;
                $.operate.save(prefix + "/add/"+roleid,params);
            }
        }

        var modelBean= {
            certImgFont:'',
            certImgBack:'',
            certImgPass:''
        };

        var vm = new Vue({
            el: '#formBox',
            data: {
                authType: '[[${authType}]]',
                certImgFont: ctx + ('img/no_img.png'),
                certImgBack: ctx + ('img/no_img.png'),
                certImgPass: ctx + ('img/no_img.png'),
            },
            methods: {
            }
        });

        $(function () {
                new AjaxUpload('#certImgFont', {
                    action: ctx + 'admin/file/upload',
                    name: 'file',
                    data: {
                        logic: 'set_pay_img',
                        type: 'auth',
                        state: '0',
                        puth:'11'
                    },
                    autoSubmit: true,
                    responseType: "json",
                    onSubmit: function (file, extension) {
                        if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
                            alert('只支持jpg、png、gif格式的图片！');
                            return false;
                        }
                    },
                    onComplete: function (file, r) {
                        if (r.code == 0) {
                            vm.certImgFont = ctx + r.url;
                            modelBean.certImgFont = r.url;
                        } else {
                            alert(r.msg);
                        }
                    }
                });
                new AjaxUpload('#certImgBack', {
                    action: ctx + 'admin/file/upload',
                    name: 'file',
                    data: {
                        logic: 'set_pay_img',
                        type: 'auth',
                        state: '0',
                        puth:'11'
                    },
                    autoSubmit: true,
                    responseType: "json",
                    onSubmit: function (file, extension) {
                        if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
                            alert('只支持jpg、png、gif格式的图片！');
                            return false;
                        }
                    },
                    onComplete: function (file, r) {
                        if (r.code == 0) {
                            vm.certImgBack = ctx + r.url;
                            modelBean.certImgBack = r.url;
                        } else {
                            alert(r.msg);
                        }
                    }
                });
                new AjaxUpload('#certImgPass', {
                    action: ctx + 'admin/file/upload',
                    name: 'file',
                    data: {
                        logic: 'set_pay_img',
                        type: 'auth',
                        state: '0',
                        puth:'11'
                    },
                    autoSubmit: true,
                    responseType: "json",
                    onSubmit: function (file, extension) {
                        if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
                            alert('只支持jpg、png、gif格式的图片！');
                            return false;
                        }
                    },
                    onComplete: function (file, r) {
                        if (r.code == 0) {
                            vm.certImgPass = ctx + r.url;
                            modelBean.certImgPass = r.url;
                        } else {
                            alert(r.msg);
                        }
                    }
                });
        });

    </script>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/ajaxupload.js}"></script>
    <div th:include="include::footer"></div>
</body>
</html>
